<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title th:text="${bookName}"></title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/common.css">
    <script src="/webjars/jquery/1.11.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="/js/page-common.js"></script>
    <script src="/js/util.js"></script>
</head>
<body>
    <div class="clearfix p">
        <div class="aside transEle">
            <div>
                <ol class="breadcrumb">
                    <th:block th:each="filePath:${filePaths}">
                        <li><a th:href="${filePath.getUrl()}" th:text="${filePath.getName()}"></a></li>
                    </th:block>
                </ol>
            </div>
            <div class="clearfix">
                <div class="fl">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <span th:text="'当前类型:' + ${fileType}"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <th:block th:each="type:${fileTypes}">
                                <li class="typeIndicator" th:if="${type != fileType}" ><a href="#" th:text="${type}"></a></li>
                            </th:block>
                        </ul>
                    </div>
                </div>
                <div class="transEle fl scaler">
                    <button type="button" class="btn btn-default" aria-label="Left Align">
                        <span class="glyphicon glyphicon-menu-left"></span>
                    </button>
                </div>
            </div>

            <ul class="list-group" th:if="${booksDetails != null && booksDetails.size() > 0}">
                <a href="/" class="list-group-item">首页</a>
                <th:block th:each="item:${booksDetails}">
                    <a th:href="${item.url}" th:class="${item.forwardUrl.equals(link)?'active list-group-item':'list-group-item'}" th:text="${item.name}"></a>
                </th:block>
            </ul>
            <div th:unless="${booksDetails != null && booksDetails.size() > 0}" class="full center">
                无列表
            </div>
        </div>
        <div class="content transEle">
            <div style="display: flex; flex-direction: row" th:if="${curDetail != null && !curDetail.isDir()}">
                <div class="audio-container" style="margin: 20px; display: flex; flex-direction: column;text-align: center">
                    <div>
                        <button type="button" class="btn btn-success btn-lg" onclick="gotoDetail()">单独打开</button>
                    </div>
                    <div>
                        <span>使用<a href="https://web.hypothes.is/" target="_blank">hypothes js</a>尽情标注</span>
                    </div>
                </div>
            </div>
            <iframe th:if="${curDetail != null && !curDetail.isDir()}" th:src="${link}" frameborder="no"  scrolling="auto" width="100%" align="centor" height="100%">
            </iframe>
            <div th:unless="${curDetail != null && !curDetail.isDir()}" class="full center">
                当前无内容
            </div>
        </div>
    </div>
</body>
<script th:inline="javascript">
    function gotoDetail() {
        let link = /*[[${link}]]*/ null;
        let type = /*[[${fileType}]]*/ null;
        forward(link, type);
    }
    window.onload = ()=> {
        console.log("on load and start...");
        applyCommon();
        // 当鼠标放置在目录按钮上三秒则消失 end
        // 点击下拉更换文件类型 start
        const suffixParam = "type=";
        let $indicators = $(".typeIndicator");
        $indicators.click((e)=> {
            let $indicator = $(e.target);
            console.log("indicator",$indicator)
            // 获取当前选中的文件类型
            let curType = $indicator.text().trim();
            console.log("curType",curType);
            let url = window.location.href;
            let suffixIndex = url.indexOf(suffixParam);
            // 拼接url
            if (suffixIndex === -1) {
                if (url.indexOf("?") === -1) {
                    url += "?type=" + curType;
                } else {
                    url += "&type=" + curType;
                }
            } else {
                let nextIndex = url.indexOf("&",suffixIndex);
                let middleIndex = suffixIndex + suffixParam.length;
                console.log("???")
                if (nextIndex === -1) {
                    url = url.substring(0,middleIndex) + curType;
                } else {
                    url = url.substring(0,middleIndex) + curType + url.substring(nextIndex);
                }
            }
            window.location.href = url;
        });
        // 点击下拉更换文件类型 end
        // 侧边栏伸缩 start
        let $scaler = $(".scaler");
        let $aside = $(".aside");
        let $content = $(".content");
        let isCollapse = false;
        $scaler.click(()=>{
           if (isCollapse) {
               $scaler.removeClass("collapsing");
               $aside.removeClass("collapsing");
               $content.removeClass("collapsing");
           } else {
               $scaler.addClass("collapsing");
               $aside.addClass("collapsing");
               $content.addClass("collapsing");
           }
           isCollapse = !isCollapse;
        });
        // 侧边栏伸缩 end
        let iframe = document.querySelector('iframe');
        let doc = iframe.contentWindow || iframe.contentDocument;
        if (doc.document) doc = doc.document;
        function onLoadFrame() {
            console.log("iframe load and start...");
            copyAvailable(doc);
            fixCodeView(doc);
        }
        $(doc).ready(onLoadFrame);
    }
</script>
</html>